
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>无限轮播</title>
		<meta name="description" content="">
		<meta name="keywords" content="">
		<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
	
		<style type="text/css">

		
		html,body,ul,li,p{
			margin: 0;
			padding: 0;
		}
		li{
			list-style: none;
		}
		a{
			text-decoration: none;
		}
		html, body, #header, #header .carousel, #header .img-ct{
			height: 100%;
			width: 100%;
		}
		.carousel{
			position: relative;
			width: 310px;
			height: 206px;
			overflow: hidden;
		}
		#header .img-ct{
			position: absolute;
		}
		#header .img-ct:after{
			content: '';
			display: table;
			clear: both;
		}
		#header .item{
			position: relative;
			float: left;
			height: 100%;
		}
		#header .main{
			position: absolute;
			width: 600px;
			left: 50%;
			top: 50%;
			z-index: 1;
			transform: translate(-50%, -50%);
			color: #fff;
			text-align: center;
		}
		#header .main h3{
			font-size: 34px;
		}
		#header .main p{
			font-size: 16px;
			line-height: 2;
		}
      
		#header .cover{
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			background-repeat: no-repeat;
			background-position: center center;
			background-size: cover;
			opacity: 0.8;
		}



	
		.arrow{
			position: absolute;
		    top: 50%;
		    margin-top: -15px;
		    width: 30px;
		    height: 30px;
		    line-height: 30px;
		    text-align: center;
		    background: #4E443C;
		    color: #fff;
		    border-radius: 30px;
		    box-shadow: 0 0 2px #999;
		    opacity: 0.8
		}
		.arrow:hover {
		    opacity: 1;
		}
		.pre{
			left: 10px;
		}
		.next{
			right: 10px;
		}
		ul.bullet {
			    position: absolute;
		    bottom: 10px;
		    left: 50%;
		    transform: translateX(-50%);
		}
		ul.bullet li {
		    width: 16px;
		    height: 4px;
		    border-radius: 2px;
		    background: #fff;
		    display: inline-block;
		    cursor: pointer;
		}

		ul.bullet li.active {
		    background: #666;
		}


		</style>

	</head>
	<body>
	<div id="header">
		<div class="carousel">
			<ul class="img-ct">

		        <li class="item">
		          <div class="cover" data-bg-img="http://upload-images.jianshu.io/upload_images/1043191-846d456a9647cc7a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"></div>
		          <div class="main">
		            <h3>夜空中最亮的星</h3> 
		            <p>是否在意</p>
		          </div>
		        </li>
		        <li class="item">
		          <div class="cover" data-bg-img="http://upload-images.jianshu.io/upload_images/1043191-459fb5d88ae94edf.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"></div>
		          <div class="main">
		            <h3>夜空中最亮的星</h3> 
		            <p>是否在意</p>
		          </div>
		        </li>
		        <li class="item">
		          <div class="cover" data-bg-img="http://upload-images.jianshu.io/upload_images/1043191-46d6edfe0a08f1ab.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"></div>
		          <div class="main">
		            <h3>夜空中最亮的星</h3> 
		            <p>是否在意</p>
		          </div>
		        </li>
		        <li class="item">
		          <div class="cover" data-bg-img="http://upload-images.jianshu.io/upload_images/1043191-a46a8cc1df04ce3a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"></div>
		          <div class="main">
		            <h3>夜空中最亮的星</h3> 
		            <p>是否在意</p>
		          </div>
		        </li>
			</ul>
			<ul class="bullet">
				<li class="active"></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>		
	</div>



		
		<script type="text/javascript">
		//$(function(){
			
			var $ct = $('.img-ct'),
				$items = $ct.children(),
				$pre = $('.pre'),
				$next = $('.next'),
				$bullet = $('.bullet'),
				imgWidth = $(window).width(),
				imgCount = $ct.children().size();

			$ct.prepend($items.last().clone());
			$ct.append($items.first().clone());
			$ct.find('.item').css('width', imgWidth);
			$ct.find('.cover').css('width', imgWidth);
			imgRealCount = $ct.children().size();
			$ct.css({left: 0-imgWidth, width: imgRealCount*imgWidth})





			var curIdx = 0;
			var isAnimate = false;


			$bullet.find('li').on('click', function(){
				var idx = $(this).index();
				if(idx > curIdx){
					playNext(idx - curIdx);
				}else if(idx < curIdx){
					playPre(curIdx - idx);
				}
			});

			setBg(1);  //载入第二张图片
			autoPlay();


			function stopAuto(){
				clearInterval(clock);
			}

			function autoPlay(){
				clock = setInterval(function(){
					playNext();
				}, 3000);	
			}


			function playNext(idx){
				var idx = idx || 1;
				if(!isAnimate){
					isAnimate = true;
					setBg(curIdx+2); 	//载入第三张
					$ct.animate({left: '-='+(imgWidth*idx)},function(){
						curIdx = (curIdx + idx)%imgCount;
						if(curIdx === 0){
							$ct.css({left: 0-imgWidth});;
						}
						isAnimate = false;
						setBullet();
					});
				}
			}

			function playPre(idx){
				var idx = idx || 1;
				if(!isAnimate){
					isAnimate = true;
					setBg(curIdx);
					$ct.animate({left: '+='+(imgWidth*idx)},function(){
						curIdx = (imgCount + curIdx - idx)%imgCount;
						if(curIdx === (imgCount - 1)){
							$ct.css({left: 0-imgWidth*imgCount});;
						}
						isAnimate = false;
						setBullet();
					});
				}
			}

			//图片懒加载
			function setBg(idx){
				var idx = idx || 0,
					$node = $ct.children().eq(idx)
					$cover = $node.find('.cover'),
					imgUrl = $cover.attr('data-bg-img');
				if($node.data('isBgSet')) return;
				$cover.css('background-image', 'url('+imgUrl+')');
				$node.data('isBgSet', true);
				
			}

			function setBullet(){
				$bullet.children().removeClass('active')
								  .eq(curIdx).addClass('active');
			}

		
		
		</script>
	</body>
</html>
